<template>
    <div class="bbox">
        <div class="head" v-if="token">
            <span class="iconfont icon-chart-pie" @click="gotoMessages"></span>
            <span class="iconfont icon-renyuanguanli" @click="gotoSet"></span>
        </div>
        <div class="head" v-else>
            <span class="iconfont icon-chart-pie" @click="gotoPassword"></span>
            <span class="iconfont icon-renyuanguanli" @click="gotoPassword"></span>
        </div>
        <!-- 登录后显示的 -->
        <div class="user-login" v-if="token">
            <div class="user-img">
                <img :src="data.avatar" alt="" />
            </div>
            <div class="user-plz" @click="gotoProfile">
                <div class="user-nickname">
                    {{ data.nick_name }}
                </div>
                <div class="role-name">{{ datas.name }}</div>
            </div>
            <div class="iconfont icon-arrow-right-bold"></div>
        </div>
        <!-- 没有登录显示的 -->
        <div class="user-login" v-else>
            <div class="user-img">
                <img src="http://h5.xiaomage.tech/static/img/watermark@2x.96361c4e.png" alt="" />
            </div>
            <div class="user-plz" @click="gotoPassword">请登录</div>
            <div class="iconfont icon-arrow-right-bold"></div>
        </div>
        <div class="vip-box" v-if="token" @click="gotoVip">
            <img src="http://h5.xiaomage.tech/static/img/VIPcenter@2x.9d9a839e.png" alt="" />
        </div>
        <div class="vip-box" v-else @click="gotoPassword">
            <img src="http://h5.xiaomage.tech/static/img/VIPcenter@2x.9d9a839e.png" alt="" />
        </div>
        <div class="tablist">
            <div class="list-title">我的账号</div>
            <div class="list-body" v-if="token">
                <div class="box" @click="gotoOrder">
                    <div class="iconfont icon-bianji"></div>
                    <div>我的订单</div>
                </div>
                <div class="box" @click="gotoPromocode">
                    <div class="iconfont icon-Dyanjing"></div>
                    <div>我的邀请</div>
                </div>
            </div>
            <div class="list-body" v-else>
                <div class="box" @click="gotoPassword">
                    <div class="iconfont icon-bianji"></div>
                    <div>我的订单</div>
                </div>
                <div class="box" @click="gotoPassword">
                    <div class="iconfont icon-Dyanjing"></div>
                    <div>我的邀请</div>
                </div>
            </div>
        </div>
        <div class="logo">
            <div class="img">
                <img src="http://h5.xiaomage.tech/static/img/watermark@2x.96361c4e.png" alt="" />
            </div>
        </div>
        <footerv></footerv>
    </div>
</template>

<script>
import footerv from "@/components/FooTerv.vue";
export default {
    data() {
        return {
            token: "",
            //总数据
            data: {},
            //总数据里的小数据
            datas: {},
        };
    },
    methods: {
        gotoPassword() {
            this.$router.push({
                path: "password",
                query: {
                    url: window.location.href,
                },
            });
        },
        gotoProfile() {
            this.$router.push({
                path: "/user/profile",
                query: {},
            });
        },
        gotoSet() {
            this.$router.push({
                path: "/user/setting",
                query: {},
            });
        },
        gotoMessages() {
            this.$router.push({
                path: "/messages",
                query: {},
            });
        },
        gotoOrder() {
            this.$router.push({
                path: "/user/order",
                query: {},
            });
        },
        gotoPromocode() {
            this.$router.push({
                path: "/user/promocode",
                query: {},
            });
        },
        gotoVip() {
            this.$router.push({
                path: "/vip",
                query: {},
            });
        },
    },
    async created() {
        let token = localStorage.getItem("h5-token");
        if (token) {
            this.token = token;
            let res = await this.$request.get("/api/v2/member/detail", {
                params: {
                    Authorization: `Bearer ${token}`,
                },
            });
            this.data = res.data;
            this.datas = this.data.role;
        }
    },
    components: {
        footerv,
    },
};
</script>

<style lang="less" scoped>
.bbox {
    .head {
        padding: 20px 15px 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            line-height: 26px;
            font-size: 26px;
        }
    }
    .user-login {
        padding: 25px 15px 30px 15px;
        display: flex;
        div {
            display: flex;
            align-items: center;
        }
        .user-img {
            height: 64px;
            padding-right: 15px;
            img {
                width: 64px;
                height: 64px;
                border-radius: 50%;
            }
        }
        .user-plz {
            flex: 1;
            color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-wrap: wrap;
            .user-nickname {
                width: 100%;
                padding-top: 10px;
                padding-bottom: 15px;
                font-size: 16px;
                font-weight: 600;
                color: #333;
                line-height: 16px;
            }
            .role-name {
                width: 100%;
                font-size: 13px;
                font-weight: 400;
                color: #666;
                line-height: 13px;
            }
        }
        .iconfont {
            font-size: 12px;
        }
    }
    .vip-box {
        width: 100%;
        height: 60px;
        background: #fff;
        text-align: center;
        img {
            height: 60px;
        }
    }
    .tablist {
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 30px 15px;
        margin-bottom: 10px;
        .list-title {
            width: 100%;
            margin-bottom: 25px;
            font-size: 15px;
            font-weight: 600;
            color: #333;
            line-height: 15px;
        }
        .list-body {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            padding-left: 15px;
            padding-right: 15px;
            .box {
                div:nth-child(1) {
                    width: 100%;
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 30px;
                }
                div:nth-child(2) {
                    width: 100%;
                    font-size: 12px;
                    font-weight: 400;
                    color: #333;
                    line-height: 12px;
                    text-align: center;
                }
            }
        }
    }
    .logo {
        width: 100%;
        height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-bottom: 53px;
        text-align: center;
        .img {
            display: flex;
            justify-content: center;
            img {
                width: 115px;
                height: 42px;
            }
        }
    }
}
</style>
